<template>
  <div>
    <el-dialog
      top="15%"
      width="16%"
      :visible.sync="visiable"
      :before-close="closeVisiable"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="addDataBtnBox" @click="addDataBtn" style="z-index: 999; cursor: pointer">
          <i class="el-icon-check" />
        </div>
        <p class="dialog-title">{{ currentModel == 'add' ? '添加' : '更新' }}图片</p>
      </template>
      <div class="edit-panorama-body" style="height: 130px">
        <div class="upload-name-box">
          <p class="panorama-name">名称</p>
          <el-input v-model="name" size="mini" style="width: 85%; margin-left: 10px" />
        </div>
        <div class="upload-name-box">
          <p>宽度</p>
          <el-input v-model="width" size="mini" style="width: 70px; margin-left: 10px" />
          <p style="margin-left: 15px">高度</p>
          <el-input v-model="height" size="mini" style="width: 70px; margin-left: 10px" />
        </div>
        <div class="upload-name-box">
          <p>x轴：</p>
          <el-input v-model="x" size="mini" style="width: 60px; margin-left: 10px" />
          <p style="margin-left: 15px">y轴：</p>
          <el-input v-model="y" size="mini" style="width: 60px; margin-left: 10px" />
        </div>
        <p
          class="panorama-name"
          style="font-size: 11px; margin-top: 10px; color: #1890ff; cursor: pointer"
          @click="triggerFileInput"
        >
          {{ currentModel == 'add' ? '添加' : '更新' }}图片
        </p>
        <input
          type="file"
          accept="image/*"
          ref="fileInput"
          style="display: none"
          @change="handleFileChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDisplayImages, postDisplayImage, delDisplayImage } from '../../api/cad.js';
export default {
  name: 'addButton',
  props: {
    cadTreeId: {
      type: Number,
      default: void 0,
    },
  },
  data() {
    return {
      visiable: false,
      name: void 0,
      x: void 0,
      y: void 0,
      width: void 0,
      height: void 0,
      imageFile: null,
      currentModel: 'add',
      currentImageId: void 0,
    };
  },
  methods: {
    openVisiable(payload) {
      // console.log(payload);
      this.resetData();
      if (payload && payload.image) {
        this.currentImageId = payload.image.id;
        this.name = payload.image.name;
        this.x = payload.image.x;
        this.y = payload.image.y;
        this.width = payload.image.width;
        this.height = payload.image.height;
        this.currentModel = 'edit';
      }
      this.visiable = true;
    },
    closeVisiable() {
      this.visiable = false;
    },
    triggerFileInput() {
      this.$refs.fileInput.click(); // 点击隐藏的文件选择框
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageFile = file;
        console.log('选中的文件:', file);
      }
    },
    addDataBtn() {
      const formData = new FormData();
      if (this.currentModel == 'add') {
        formData.set('cadTreeId', this.cadTreeId ?? '');
        formData.set('name', this.name ?? '');
        formData.set('x', this.x ?? '');
        formData.set('y', this.y ?? '');
        formData.set('width', this.width ?? '');
        formData.set('height', this.height ?? '');
        formData.set('file', this.imageFile ?? '');
      } else {
        formData.set('id', this.currentImageId ?? '');
        formData.set('cadTreeId', this.cadTreeId ?? '');
        formData.set('name', this.name ?? '');
        formData.set('x', this.x ?? '');
        formData.set('y', this.y ?? '');
        formData.set('width', this.width ?? '');
        formData.set('height', this.height ?? '');
        if (this.imageFile) {
          formData.set('file', this.imageFile);
        }
      }
      // for (let [key, value] of formData.entries()) {
      //   console.log(`${key}: ${value}`);
      // }
      postDisplayImage(formData).then(res => {
        console.log(res);
        if (res.success) {
          this.$message.success('看板图片添加成功!');
          this.closeVisiable();
          this.resetData();
          this.$emit('add-display-image-success', true);
        }
      });
    },
    resetData() {
      this.name = void 0;
      this.x = void 0;
      this.y = void 0;
      this.width = void 0;
      this.height = void 0;
      this.imageFile = null;
      this.currentModel = 'add';
      this.currentImageId = void 0;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.addDataBtnBox {
  margin-right: 15px;
  position: absolute;
  top: 10px;
  right: 32px;
  cursor: pointer;
}

.dialog-title {
  font-size: 11px;
  color: #ffffff;
}

.upload-name-box {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 11px;
  color: #fbfbfb;
}

.panorama-name,
p {
  text-wrap: nowrap;
}
</style>
